let defaultTailwindConfig = require('./defaultTailwindConfig')
module.exports = {
  important: true,
  mode: 'jit',
  purge: {
    enabled: true,
    content: ['./index.html', './src/**/*.{vue,jsx,tsx}']
  },
  darkMode: 'media', // or 'media' or 'class'
  content: [],
  variants: {
    extend: {
      borderWidth: ['hover']
    }
  },
  theme: {
    spacing: {
      ...defaultTailwindConfig.spacing
    },
    width: theme => ({
      ...theme('inset'),
      ...defaultTailwindConfig.width
    }),
    minWidth: theme => ({
      ...theme('inset'),
      ...defaultTailwindConfig.width
    }),
    maxWidth: theme => ({
      ...theme('inset'),
      ...defaultTailwindConfig.width
    }),
    height: theme => ({
      ...theme('inset'),
      screen: '100vh'
    }),
    minHeight: theme => ({
      ...theme('inset'),
      ...defaultTailwindConfig.height
    }),
    maxHeight: theme => ({
      ...theme('inset'),
      ...defaultTailwindConfig.height
    }),
    boxShadow: {
      ...defaultTailwindConfig.boxShadow
    },
    // 边框颜色
    borderColor: theme => ({
      ...theme('colors')
    }),
    inset: theme => ({
      auto: 'auto',
      full: '100%',
      ...theme('spacing'),
      ...defaultTailwindConfig.proportation
    }),
    // 页面断点
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1440px',
      '2xl': '1536px'
    },
    container: {
      center: true // container 默认居中
    },
    colors: {
      transparent: '',
      current: 'currentColor',

      logo: '#0061ae',

      content: '#f9fbfc',
      default: '#31456A',

      white: '#ffffff',
      white_light: 'rgba(255, 255, 255,0.2)',
      black: '#000',
      gray: '#818181',
      graylight: '#e4e7ed',
      blue: '#409EFF',
      bluelight: '#ecf5ff',
      red: '#F56C6C',
      green: '#67C23A',
      dark: '#1a2042',
      yellow: '#e2c12a',
      current: '#f4f4f4',

      primary: '#1758F0',
      primaryHalf: '#3A85FF',
      primaryLight: '#EDF2FC',
      success: '#19AD54',
      successHalf: '#e1f3d8',
      successLight: '#f0f9eb',
      warning: '#F9B641',
      warningHalf: '#faecd8',
      warningLight: '#fdf6ec',
      danger: '#F25656',
      dangerHalf: '#fde2e2',
      dangerLight: '#fef0f0',
      info: '#909399',
      infoHalf: '#e9e9eb',
      infoLight: '#f4f4f5',

      main: '#f1f4f9',

      text: '#31456A',
      xText: '#293035',
      '2xText': '#4E5969',
      '3xText': '#424E66',
      '4xText': '#8C8C8C',
      '5xText': '#BFBFBF',
      '6xText': '#ADB2BD',

      select: '#F7F8FA',
      splitLine: '#E5E6EB',

      redirectBtn: '#f2f3f5',

      headerHover: '#f3f3f3',

      inputLine: '#D9D9D9',

      msgAlert: '#f3f3f3'
    },
    lineHeight: theme => ({
      none: '1',
      tight: '1.25',
      snug: '1.375',
      normal: '1.5',
      relaxed: '1.625',
      loose: '2',
      ...theme('spacing')
    }),
    textColor: theme => theme('colors'),
    margin: theme => theme('inset'),
    fontSize: theme => ({
      xs: ['0.75rem', {lineHeight: '1rem'}],
      sm: ['0.875rem', {lineHeight: '1.25rem'}],
      base: ['1rem', {lineHeight: '1.5rem'}],
      lg: ['1.125rem', {lineHeight: '1.75rem'}],
      xl: ['1.25rem', {lineHeight: '1.75rem'}],
      '2xl': ['1.5rem', {lineHeight: '2rem'}],
      '3xl': ['1.875rem', {lineHeight: '2.25rem'}],
      '4xl': ['2.25rem', {lineHeight: '2.5rem'}],
      '5xl': ['3rem', {lineHeight: '1'}],
      '6xl': ['3.75rem', {lineHeight: '1'}],
      '7xl': ['4.5rem', {lineHeight: '1'}],
      '8xl': ['6rem', {lineHeight: '1'}],
      '9xl': ['8rem', {lineHeight: '1'}],
      ...theme('spacing')
    }),
    backgroundColor: theme => ({
      ...theme('colors')
    }),
    padding: theme => ({
      ...theme('spacing')
    }),
    borderRadius: theme => ({
      full: '9999px',
      ...theme('spacing')
    }),
    borderWidth: theme => ({
      DEFAULT: '1px',
      none: 'none',
      ...theme('spacing')
    }),
    rotate: theme => ({
      ...defaultTailwindConfig.rotate
    }),
    fontFamily: {
      ...defaultTailwindConfig.fontFamily
    },
    letterSpacing: theme => ({
      ...defaultTailwindConfig.letterSpacing,
      ...theme('spacing')
    }),
    backgroundImage: theme => ({
      ...defaultTailwindConfig.backgroundImage
    }),
    opacity: {
      0: '0',
      5: '0.05',
      10: '0.1',
      20: '0.2',
      25: '0.25',
      30: '0.3',
      40: '0.4',
      50: '0.5',
      60: '0.6',
      70: '0.7',
      75: '0.75',
      80: '0.8',
      90: '0.9',
      95: '0.95',
      100: '1',
      105: '1.05'
    },
    gridTemplateColumns: {
      none: 'none',
      1: 'repeat(1, minmax(0, 1fr))',
      2: 'repeat(2, minmax(0, 1fr))',
      3: 'repeat(3, minmax(0, 1fr))',
      4: 'repeat(4, minmax(0, 1fr))',
      5: 'repeat(5, minmax(0, 1fr))',
      6: 'repeat(6, minmax(0, 1fr))',
      7: 'repeat(7, minmax(0, 1fr))',
      8: 'repeat(8, minmax(0, 1fr))',
      9: 'repeat(9, minmax(0, 1fr))',
      10: 'repeat(10, minmax(0, 1fr))',
      11: 'repeat(11, minmax(0, 1fr))',
      12: 'repeat(12, minmax(0, 1fr))',
      24: 'repeat(24, minmax(0, 1fr))'
    },
    gridColumn: {
      auto: 'auto',
      'span-1': 'span 1 / span 1',
      'span-2': 'span 2 / span 2',
      'span-3': 'span 3 / span 3',
      'span-4': 'span 4 / span 4',
      'span-5': 'span 5 / span 5',
      'span-6': 'span 6 / span 6',
      'span-7': 'span 7 / span 7',
      'span-8': 'span 8 / span 8',
      'span-9': 'span 9 / span 9',
      'span-10': 'span 10 / span 10',
      'span-11': 'span 11 / span 11',
      'span-12': 'span 12 / span 12',
      'span-20': 'span 20 / span 20',
      'span-full': '1 / -1'
    },
    extend: {}
  },
  plugins: []
}
